<template>
    <div class="cemetery-list-container">
        <Header />
        <div class="container">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1 class="page-title">团体列表</h1>
            </div>

            <!-- 团体网格列表 -->
            <div class="cemetery-grid">
                <div v-for="cemetery in pager.lists" :key="cemetery.id" class="cemetery-item"
                    @click="handleCemeteryClick(cemetery)">
                    <div class="cemetery-image">
                        <img :src="cemetery.logo || '/default-cemetery.jpg'" />
                    </div>
                    <div class="cemetery-name">
                        {{ cemetery.name }}
                    </div>
                </div>
                
            </div>
            <div class="flex justify-end mt-4" v-if="!loading && pager.lists.length > 0">
                <pagination v-model="pager" @change="getLists" ref="paginationRef" />
            </div>
            <!-- 加载状态 -->
            <div v-if="loading" class="loading-container">
                <span>加载中...</span>
            </div>

            <!-- 空状态 -->
            <div v-if="!loading && pager.lists.length === 0" class="empty-container">
                <el-empty description="暂无团体数据" />
            </div>
        </div>
        
        <Footer />
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { familyList } from '@/api/family';
import feedback from '@/utils/feedback';
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue'
import { usePaging } from '@/hooks/usePaging';
const router = useRouter();

// 团体列表数据
interface Cemetery {
    id: number;
    name: string;
    logo?: string;
    type: number; // 1: cemeteryHome, 2: cemeteryHomeTemplate
    template_id?: number;
}

const cemeteryList = ref<Cemetery[]>([]);
const loading = ref(false);

// 获取团体列表数据
const queryParams = ref({})
const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: familyList,
    params: queryParams.value
})
// const getCemeteryList = async () => {
//     try {
//         loading.value = true;
//         // 这里使用现有的API，实际项目中可能需要专门的团体列表API
//         const response = await familyList({ page_no: 1, page_size: 100 });
//         cemeteryList.value = response.list || [];
//     } catch (error) {
//         console.error('获取团体列表失败:', error);
//         feedback.msgError('获取团体列表失败');
//     } finally {
//         loading.value = false;
//     }
// };
getLists()
// 处理团体点击事件
const handleCemeteryClick = (cemetery: Cemetery) => {
    try {

        // router.push(`/muDetail?id=${id}`)
        let targetRouteLocationForButton = {}
        if(cemetery.type == 1){
            targetRouteLocationForButton = {
                name: cemetery.template_id == 0 ? 'familyHome' : 'familyHomeTemplate',
                query: { id: cemetery.id },
            };
        }else{
            targetRouteLocationForButton = {
                name: cemetery.template_id == 0 ? 'cemeteryHome' : 'cemeteryHomeTemplate',
                query: { id: cemetery.id },
            };
        }
        const resolvedRouteForButton = router.resolve(targetRouteLocationForButton);
        console.log(resolvedRouteForButton)
        // 使用 window.open 打开新标签页
        window.open(resolvedRouteForButton.href, '_blank');


        // let targetRoute = '';

        // // 根据type决定跳转路径
        // if (cemetery.type === 1) {
        //     targetRoute = `/cemeteryHome?id=${cemetery.id}`;
        // } else if (cemetery.type === 2) {
        //     targetRoute = `/cemeteryHomeTemplate?id=${cemetery.id}`;
        // } else {
        //     // 默认根据template_id判断
        //     if (cemetery.template_id === 0) {
        //         targetRoute = `/cemeteryHome?id=${cemetery.id}`;
        //     } else {
        //         targetRoute = `/cemeteryHomeTemplate?id=${cemetery.id}`;
        //     }
        // }

        // // 在新窗口打开
        // window.open(targetRoute, '_blank');
    } catch (error) {
        console.error('跳转失败:', error);
        feedback.msgError('跳转失败');
    }
};

// 页面加载时获取数据
onMounted(() => {
    // getCemeteryList();
});
</script>

<style scoped>
.cemetery-list-container {
    background-color: #f5f5f5;
    min-height: 100vh;
}
.container{
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}
.page-header {
    margin-bottom: 30px;
    text-align: center;
}

.page-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.cemetery-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.cemetery-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 180px;
}

.cemetery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.cemetery-image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 15px;
    border: 3px solid #f0f0f0;
}

.cemetery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cemetery-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    word-break: break-word;
}

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #666;
}

.loading-container span {
    margin-top: 10px;
    font-size: 14px;
}

.empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .cemetery-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 900px) {
    .cemetery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 700px) {
    .cemetery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .cemetery-item {
        padding: 15px;
        min-height: 150px;
    }

    .cemetery-image {
        width: 60px;
        height: 60px;
    }

    .cemetery-name {
        font-size: 14px;
    }
}

@media (max-width: 500px) {
    .cemetery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>